<template>
  <div class="home">
      <vue-particles
        color="#fff"
        :particleOpacity="0.5"
        :particlesNumber="15"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
        class="lizi"
      />
    <div class="top" :style="{ height: 1.16 * $store.state.radomRate + 'rem' }">
      <span :style="{ fontSize: 0.3 * $store.state.radomRate + 'rem' }"
        >广陈社区红色物业智慧云平台</span
      >
    </div>
    <div class="content">
      <div class="column left-slot">
        <chart1
          class="chart"
          :style="{ height: 2.8 * $store.state.radomRate + 'rem' }"
        />
        <div class="item">
          <div class="title">
            <img src="../assets/title.png" alt="" class="img" :style="{ height: 0.58 * $store.state.radomRate + 'rem' }">
            <span  :style="{ top: 0.12 * $store.state.radomRate + 'rem' }">受理事件</span>
          </div>
          <chart2
            class="chart"
            :style="{ height: 2.7 * $store.state.radomRate + 'rem' }"
          />
        </div>
        <div class="item">
          <div class="title">
            <img src="../assets/title.png" alt="" class="img" :style="{ height: 0.58 * $store.state.radomRate + 'rem' }">
            <span :style="{ top: 0.12 * $store.state.radomRate + 'rem' }">市长电话及百姓事马上办数据统计</span>
          </div>
          <chart3
            class="chart"
            :style="{ height: 2.7 * $store.state.radomRate + 'rem' }"
          />
        </div>
      </div>
      <div class="column right-slot">
        <maps />
        <div class="bottom">
          <div class="item">
            <div class="title">
              <img src="../assets/title.png" alt="" class="img" :style="{ height: 0.58 * $store.state.radomRate + 'rem' }">
              <span :style="{ top: 0.12 * $store.state.radomRate + 'rem' }">投诉建议排名(件)</span>
            </div>
            <chart4
              class="chart"
              :style="{ height: 2.75 * $store.state.radomRate + 'rem' }"
            />
          </div>
          <div class="item">
            <div class="title">
              <img src="../assets/title.png" alt="" class="img" :style="{ height: 0.58 * $store.state.radomRate + 'rem' }">
              <span :style="{ top: 0.12 * $store.state.radomRate + 'rem' }">幸福指数排名(%)</span>
            </div>
            <chart5
              class="chart"
              :style="{ height: 2.75 * $store.state.radomRate + 'rem' }"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import chart1 from "../components/chart1.vue";
import chart2 from "../components/chart2.vue";
import chart3 from "../components/chart3.vue";
import chart4 from "../components/chart4.vue";
import chart5 from "../components/chart5.vue";
import maps from "../components/map.vue";
export default {
  components: {
    chart1,
    chart2,
    chart3,
    chart4,
    chart5,
    maps,
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.lizi {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100%;
}
.home {
  background: url("../assets/index-bg.png") no-repeat #000;
  background-size: 100% 100%;
  .top {
    background: url("../assets/head-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    span {
      color: #ffffff;
      background: linear-gradient(
        5deg,
        #00a8ff 0%,
        #00eaff 48.8525390625%,
        #00a8ff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: bold;
      letter-spacing: 0.05rem;
      position: relative;
      top: 0.08rem;
    }
  }
  .content {
    padding: 0 0.3rem 0.3rem;
    display: flex;
    margin-top: -0.15rem;
    .left-slot {
      width: 5.92rem;
      margin-right: 0.2rem;
    }
    .right-slot {
      flex: 1;
      .bottom {
        width:100%;
        display: flex;
        justify-content: space-between;
        .item{
            width:6.15rem;
        }
      }
    }
    .item {
      .title {
        color: #fff;
        position: relative;
        .img{
          width: 2.47rem;
        }
        span {
          position: absolute;
          left:0.25rem;
          font-size:0.22rem;
        }
      }
    }
    .chart {
      width: 100%;
      background: url("../assets/chart.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>